<template>
  <div style="position: relative">
    <div class="toparea">
      <!-- <div
        class="mapitem"
        v-for="(map, index) in mapArea"
        :key="map.name"
        @click="tabMap(map, index)"
      >
        <span>{{ map.name }}</span>
        <i v-if="showIcons(index)">></i>
      </div> -->
    </div>
    <div class="box" ref="box1"></div>
    <div class="echart-card" :style="waperStyle">
      <div
        class="main"
        v-for="(item, index) in filterKehu"
        :key="index"
        style="position: relative"
      >
        <!-- 左侧部分 -->
        <div style="display: flex; align-items: center">
          <img
            src="../map/位置.png"
            style="width: 20px; height: 20px; margin-right: 10px"
          />
          <div style="white-space: nowrap">{{ item.name }}：{{ item.num }}</div>
        </div>

        <!-- 右侧部分 -->
        <div style="white-space: nowrap; position: absolute; right: 0">
          状态：<span v-if="item.state == 1">{{ item.stateNum }}个</span>
          {{ getStatus(item.state) }}
        </div>
      </div>
    </div>

    <div class="citymenu" ref="cityMenu" v-if="maptype !== 1">
      <div
        class="citymenuitem"
        v-for="(map, index) in menuItems"
        :key="index"
        :class="{ selected: map.name === activeCity }"
        @click="switchToCity(map)"
      >
        {{ map.name }}
      </div>
    </div>

    <div class="map-right" v-if="maptype !== 1">
      <div class="map-right-one">
        <MapTop :city="activeCity" :key="activeCityKey" />
      </div>

      <div class="map-right-two">
        <MapPie :city="activeCity" :key="activeCityKey" />
        <!-- <MapStat /> -->
        <!-- <mapbar /> -->
      </div>
      <div class="map-right-three">
        <!-- <mapFault /> -->
        <mapbar :city="activeCity" :key="activeCityKey" />
      </div>
    </div>

    <el-switch
      v-if="maptype == 1"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #aaaaaa"
      v-model="value6"
      size="large"
      class="relitu"
      @change="changeBTN"
      inline-prompt
      active-text="打开"
      inactive-text="关闭"
    />
  </div>
</template>

<script>
// import mapFault from "@/views/screen/components/mapfault/index.vue";
// import MapStat from "@/views/screen/components/mapstat/index.vue";
import MapPie from "@/views/screen/components/mappie/index.vue";
import MapTop from "@/views/screen/components/maptop/index.vue";
import mapbar from "@/views/screen/components/mapbar/index.vue";
import axios from "axios";
import * as echarts from "echarts";
import china from "../map/100000.json";
import { RobotApi } from "@/api/map/citycount";
import { useUserStore } from "@/store/modules/user";
let useStore = useUserStore();
export default {
  components: {
    MapTop, // 局部注册 Rap 组件
    MapPie,
    // MapStat,
    mapbar,
    // mapFault,
  },
  data() {
    return {
      // 0-世界、1-国家、2-省份、3-市区、4-区
      maptype: 1,
      chart: undefined,
      mapArea: [],
      defaultData: [],
      waperStyle: {},
      kehudata: [],
      value6: false, // 控制 switch 开关的值
      geoCoordMap: {}, // 这里假设 geoCoordMap 是包含坐标的对象
      visualMapShow: false, // 控制热力图显示的标志
      visualMapColors: null,
      menuItems: [],
      secondLevelCities: null,
      selected: false,
      activeCity: null, // 当前选中的城市
      activeCityKey: 0,
    };
  },
  computed: {
    // 绑定的跳转url赋值
    filterKehu() {
      var data = [];
      this.kehudata.forEach((e) => {
        data.push({
          name: e.name,
          num: e.num,
          state: e.state,
          stateNum: e.stateNum,
        });
      });
      let result = data.reduce((acc, cur) => {
        // 如果累积数组中已存在当前名称，则找出该元素并累加其 num
        let existingElem = acc.find((item) => item.name === cur.name);
        if (existingElem) {
          existingElem.num = String(Number(existingElem.num) + Number(cur.num));
        } else {
          // 如果不存在，则直接将当前元素放入累积数组
          acc.push({
            name: cur.name,
            num: cur.num,
            state: cur.state,
            stateNum: cur.stateNum,
          });
        }
        return acc;
      }, []);

      //console.log(result);
      return result;
    },
  },

  async mounted() {
    var constat = this.$refs.box1;
    this.chart = echarts.init(constat);
    //this.initMap();
    this.maptype = 1;

    const res = await RobotApi.getRobotCityCount();
    this.defaultData = res;
    this.$nextTick(() => {
      this.initMap(); // 确保数据加载完成后再初始化地图
    });
    //console.log(this.defaultData, "defaultData", res);
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    var self = this;

    this.chart.on("mousemove", function () {
      self.waperStyle = {
        display: "none",
      };
    });

    this.chart.on("click", function (params) {
      //console.log(params, "地图点击params");
      // 只有当点击的是有效区域才触发后续操作
      if (!params.name || !params.data) {
        return; // 没有有效的区域数据，直接返回
      }
      // ❗❗❗ 拦截地图下钻，但允许导航点击
      if (self.maptype === 2 && params.componentSubType === "map") {
        console.log("🚫 市级视图，禁止地图下钻");
        return;
      }

      // 滚动到选中的城市菜单项
      if (params.componentSubType == "effectScatter") {
        // 赋值客户信息
        self.kehudata = params.data.data;

        self.waperStyle = {
          display: "block",
          top: params.event.offsetY + "px",
          left: params.event.offsetX + "px",
        };
      } else {
        self.waperStyle = {
          display: "none",
        };

        var name = params.name;
        var geodata = null;
        // 定义 convertData 函数，获取省市对应的坐标和相关数据
        var convertData = function (data) {
          var res = [];

          for (var i = 0; i < data.length; i++) {
            var geoCoord = self.mapArea[0].geoCoordMap[data[i].name]; // 根据城市名称获取坐标

            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord[1].concat(data[i].value), // 将坐标和数据合并
                data: data[i].qiyeData,
                code: geoCoord[0], // 获取对应的adcode
              });
            }
          }
          return res;
        };
        // 层级叠加
        self.maptype++;
        if (self.maptype === 2) {
          // 获取当前点击的省市，添加到二级地图城市列表
          self.secondLevelCities = Object.keys(self.mapArea[0].geoCoordMap);
          useStore.AmapTrue = false;
          // 使用 convertData 函数来更新 menuItems
          self.menuItems = convertData(self.mapArea[0].data); // 直接用 convertData 来处理数据

          self.activeCity = name; // 记录当前选中的城市

          localStorage.setItem("provinceCity", name);
          // console.log(
          //   "当前二级地图城市：",
          //   self.secondLevelCities,
          //   self.menuItems,
          //   "self.activeCity",
          //   self.activeCity
          // );
        }
        // TODO:直辖市特殊处理
        if (
          self.maptype == 3 &&
          params.data.code.toString().indexOf("310") == 0
        ) {
          jsonUrl = `https://geo.datav.aliyun.com/areas_v3/bound/${params.data.code}.json`;
        } else if (self.maptype == 4) {
          jsonUrl = `https://geo.datav.aliyun.com/areas_v3/bound/${params.data.code}.json`;
        } else {
          var jsonUrl = `https://geo.datav.aliyun.com/areas_v3/bound/${params.data.code}_full.json`;
        }

        axios.get(jsonUrl).then((res) => {
          geodata = res.data;

          var mapInfoArray = {};
          for (var i = 0; i < geodata.features.length; i++) {
            mapInfoArray[geodata.features[i].properties.name] = [
              geodata.features[i].properties.adcode,
              geodata.features[i].properties.center,
            ];
          }

          var data = self.getLayerData(2, name, mapInfoArray); // 显示到二级区域信息

          self.loadMap(geodata, name, data, mapInfoArray);

          self.mapArea.push({
            name: name,
            codeData: geodata,
            data: data,
            geoCoordMap: mapInfoArray,
            index: 2, // 表示只显示到二级
          });

          const cityMenu = document.querySelector(".citymenu");

          if (cityMenu) {
            // 执行操作
            // 检查 cityMenu 是否被正确获取
            cityMenu.querySelector(".citymenuitem.selected").scrollIntoView({
              behavior: "smooth", // 平滑滚动
              block: "center", // 让选中的城市出现在视图的中间位置
            });
          }
        });
      }
    });
  },
  methods: {
    // 切换到指定城市的二级地图
    switchToCity(cityName) {
      //console.log(cityName, "城市名称");
      this.activeCity = cityName.name; // 记录当前选中的城市

      // 更新地图类型为二级地图
      this.maptype = 2;
      var GeoData = null;
      var jsonUrl = "";

      // TODO:直辖市特殊处理
      if (this.maptype == 3 && cityName.code.toString().indexOf("310") == 0) {
        jsonUrl = `https://geo.datav.aliyun.com/areas_v3/bound/${cityName.code}.json`;
      } else if (this.maptype == 4) {
        jsonUrl = `https://geo.datav.aliyun.com/areas_v3/bound/${cityName.code}.json`;
      } else {
        jsonUrl = `https://geo.datav.aliyun.com/areas_v3/bound/${cityName.code}_full.json`;
      }

      axios.get(jsonUrl).then((res) => {
        GeoData = res.data;
        var MAPINFO = {};
        for (var i = 0; i < GeoData.features.length; i++) {
          MAPINFO[GeoData.features[i].properties.name] = [
            GeoData.features[i].properties.adcode,
            GeoData.features[i].properties.center,
          ];
        }

        var data = this.getLayerData(2, cityName.name, MAPINFO); // 显示到二级区域信息

        this.loadMap(GeoData, cityName.name, data, MAPINFO);

        // 检查 mapArea 是否已经包含该城市的名称，如果没有，才添加
        const cityExists = this.mapArea.some(
          (item) => item.name === cityName.name
        );
        if (!cityExists) {
          this.mapArea.push({
            name: cityName.name,
            codeData: GeoData,
            data: data,
            geoCoordMap: MAPINFO,
            index: 2, // 表示只显示到二级
          });
        }

        // 滚动到选中的城市菜单项
        this.$nextTick(() => {
          const cityMenu = this.$refs.cityMenu; // 获取 citymenu 容器
          const selectedItem = cityMenu.querySelector(`.citymenuitem.selected`); // 获取选中的城市菜单项
          if (selectedItem) {
            selectedItem.scrollIntoView({
              behavior: "smooth", // 平滑滚动
              block: "center", // 让选中的城市出现在视图的中间位置
            });
          }
        });
      });
      this.activeCityKey += 1;
    },
    getStatus(status) {
      const STATUSES = [
        { id: 0, name: "正常" },
        { id: 1, name: "异常" },
      ];
      const matched = STATUSES.find((item) => item.id === status);
      return matched ? matched.name : "";
    },
    initMap() {
      this.chart.showLoading();
      this.mapArea = [];

      if (this.maptype === 1) {
        echarts.registerMap("china", china);

        const mapInfoArray = {};
        for (let i = 0; i < china.features.length; i++) {
          const name = china.features[i].properties.name;
          const adcode = china.features[i].properties.adcode;
          const center = china.features[i].properties.center;
          mapInfoArray[name] = [adcode, center];
        }

        const dataArray = this.getLayerData(1, "中国", mapInfoArray);
        this.mapArea.push({
          name: "首页",
          codeData: china,
          data: dataArray,
          geoCoordMap: mapInfoArray,
          index: 1,
        });
        //console.log(dataArray, "dataArray");

        this.loadMap(china, "china", dataArray, mapInfoArray);
      }

      this.chart.hideLoading();
    },
    // 根据名称筛选出下级地区列表和客户信息
    // getLayerData函数根据给定的层级和筛选名称，返回过滤后的地区数据
    getLayerData(layer, filterName, mapData) {
      if (layer > 0) {
        const dataArray = [];
        const areaArray = [];

        this.defaultData.forEach((e) => {
          if (e.address.indexOf(filterName) > -1) {
            const addArr = e.address.split("-");

            if (addArr[layer]) {
              const name = addArr[layer];
              const nameIndex = areaArray.indexOf(name);

              if (nameIndex > -1) {
                dataArray[nameIndex].value += parseInt(e.num, 10); // 累加数量
                dataArray[nameIndex].qiyeData.push({
                  name: e.name,
                  num: e.num,
                  state: e.state,
                  stateNum: e.stateNum,
                });
              } else {
                dataArray.push({
                  name: name,
                  value: parseInt(e.num, 10), // 确保 value 是数字
                  qiyeData: [
                    {
                      name: e.name,
                      num: e.num,
                      state: e.state,
                      stateNum: e.stateNum,
                    },
                  ],
                  code: mapData[name] ? mapData[name][0] : null, // 确保 mapData 中有对应的 name
                });
                areaArray.push(name);
              }
            }
          }
        });

        return dataArray;
      }
    },
    showIcons(index) {
      if (index == this.mapArea.length - 1) {
        return false;
      }
      return true;
    },
    // 顶部层级切换
    tabMap(map, index) {
      if (map.index == 1) {
        useStore.AmapTrue = true;
      }
      this.loadMap(map.codeData, map.name, map.data, map.geoCoordMap);
      this.maptype = map.index;
      this.mapArea.splice(index + 1);
      // 更新选中的城市
      this.activeCity = map.name;

      // 滚动到选中的城市菜单项
      this.$nextTick(() => {
        const cityMenu = this.$refs.cityMenu; // 获取 citymenu 容器
        const selectedItem = cityMenu.querySelector(`.citymenuitem.selected`); // 获取选中的城市菜单项
        if (selectedItem) {
          selectedItem.scrollIntoView({
            behavior: "smooth", // 平滑滚动
            block: "center", // 让选中的城市出现在视图的中间位置
          });
        }
      });
    },
    // jsonCode-地图json
    // name-显示的区域名称
    // data-包含的区域名称和值
    // geoCoordMap-企业位置散点图
    loadMap(jsonCode, name, data, geoCoordMap) {
      // 根据名称找出省份或城市对应坐标(散点图用)
      var convertData = function (data) {
        var res = [];

        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];

          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord[1].concat(data[i].value),
              data: data[i].qiyeData,
              code: geoCoord[0],
            });
          }
        }
        //   console.log(res);
        return res;
      };
      this.chart.clear();
      // 英文格式化中文
      var nameMap = { China: "中国" };
      echarts.registerMap(name, jsonCode);
      const nums = this.defaultData.map((item) => item.num);
      const minNum = Math.min(...nums);
      const maxNum = Math.max(...nums);
      var option = {
        nameMap: nameMap, // 映射名称，`nameMap` 是一个变量，应该是一个名称映射对象
        visualMap: {
          type: "continuous",
          color: "#fff",
          min: minNum, // 最小值，设置可视化映射的最小值
          max: maxNum, // 最大值，设置可视化映射的最大值
          show: this.visualMapShow, // 这里绑定了 this.visualMapShow，用于控制显示与否
          splitNumber: 4, // 数据分割成4个区间9+
          calculable: false, // 是否启用计算功能
          seriesIndex: [1], // 指定要应用视觉映射的系列索引
          inRange: {
            color: this.visualMapColors, // 使用传入的颜色映射
          },
          text: ["500", "0"], // 映射条的两端文本
          orient: "horizontal", // 控件横向布局
          width: "800", // 控件宽度
          height: 20, // 控件高度
          left: "center", // 居中
          bottom: "20", // 顶部

          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        geo: {
          select: {
            label: {
              show: true, // 显示标签
              color: "#fff", // 设置标签的字体颜色为白色
            },
            itemStyle: {
              areaColor: "#389BB7", // 设置选中的区域颜色
              borderColor: "#fff", // 设置选中区域的边框颜色为白色
              borderWidth: "3", // 设置选中区域边框的宽度
            },
          },
          label: {
            normal: {
              show: false, // 正常状态下不显示标签
              color: "#fff", // 标签颜色设置为白色
            },
            emphasis: {
              show: true, // 高亮状态下显示标签
              color: "#fff", // 高亮标签的字体颜色为白色
            },
          },

          map: name, // 设置地图类型，`name` 是地图名称
          zoom: 1.1, // 设置地图的缩放级别
          roam: true, // 是否允许地图漫游（即拖动地图）
          top: "15%",
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)", // 正常状态下设置区域的边框颜色
              borderWidth: 1, // 设置边框宽度
              areaColor: "#005281", // 设置地图区域的颜色为深蓝色 (#005281)
              shadowColor: "rgba(128, 217, 248, 1)", // 设置区域的阴影颜色
              shadowOffsetX: -2, // 设置阴影在 X 轴上的偏移量
              shadowOffsetY: 2, // 设置阴影在 Y 轴上的偏移量
              shadowBlur: 10, // 设置阴影模糊程度
            },
            emphasis: {
              areaColor: "#32E1FF", // 高亮状态下设置区域颜色
              borderWidth: 0, // 高亮状态下不显示边框
            },
          },
        },
        series: [
          {
            name: "eff", // 系列名称
            type: "effectScatter", // 系列类型为效果散点图
            coordinateSystem: "geo", // 使用地理坐标系
            symbolSize: function (value) {
              return value[2] > 1000 ? 14 : 8; // 根据值的大小调整标记点的大小
            },
            data: convertData(data), // 数据，`convertData` 是转换函数，`data` 是传入的原始数据
            label: {
              show: false, // 默认不显示标签
              offset: [0, 0], // 标签的偏移量
              fontSize: 14, // 标签的字体大小
              formatter(value) {
                // 标签格式化函数
                return value.data.value[2]; // 返回数据中的第三个值作为标签内容
              },
              color: "#fff", // 标签颜色设置为白色
            },
            itemStyle: {
              normal: {
                color: "#00FFFF", // 设置标记的颜色为亮蓝色
              },
            },
          },
          {
            name: "MAP", // 系列名称
            type: "map", // 系列类型为地图
            geoIndex: 0, // 地理坐标系的索引
            mapType: name, // 设置地图类型为 `name`（变量）
            zoom: 1.1, // 设置地图缩放级别
            data: data, // 地图上的数据
          },
        ],
      };
      this.chart.setOption(option);
    },
    // 在 changeBTN 函数中，根据 visualMapShow 控制颜色映射的显示
    changeBTN(value) {
      // 根据 el-switch 的状态更新热力图的显示
      this.visualMapShow = value; // 更新 visualMapShow

      // 更新映射颜色范围
      this.visualMapColors = !this.visualMapShow
        ? ["#005281"] // 如果不显示，则使用深蓝色
        : ["#B8E6FF", "#7ABDE2", "#1785E3", "#0C68BC"]; // 如果显示，则使用其他颜色（这里可以根据需求调整）

      // 重新加载地图，更新热力图的显示状态
      this.initMap(); // 传递颜色映射数组
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  color: #fff;
}

.citymenu {
  position: absolute;
  left: -50%;
  top: 15%;
  width: 280px;
  height: 750px;
  background-color: #0b275d;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.citymenuitem {
  color: white;
  font-size: 18px;
  cursor: pointer;
  width: 280px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  transition: 0.3s ease;
}
.citymenuitem.selected {
  background-color: #0b4c7d; /* 选中的城市背景色 */
  color: white; /* 选中的文字颜色 */
}
.citymenuitem:hover {
  height: 80px;
  background-color: #0b4c7d;
}
.toparea {
  position: absolute;
  top: 8%;
  left: 8px;
  z-index: 9;
}

.toparea .mapitem {
  display: inline;
}

.toparea .mapitem i {
  margin: 0 0.1rem;
}

.toparea .mapitem span {
  cursor: pointer;
}
.box {
  width: 100%;
  height: 100%;
}

/* 弹窗样式 */
.echart-card {
  position: absolute;
  height: 250px;
  width: 340px;
  padding: 15px;
  background-color: RGB(23, 80, 110, 0.6);
  overflow: auto;
  display: none;
  border: 1px solid #0bb6c7;
  z-index: 9;
  box-shadow:
    1px 2px 10px 1px rgba(14, 252, 255, 0.53),
    inset 5px 4px 100px 1px rgba(14, 252, 255, 0.34);
}
.echart-card:hover {
  display: block; /* 鼠标悬浮时使元素可见 */
}
.echart-card::-webkit-scrollbar {
  width: 3.2px;
}

.echart-card::-webkit-scrollbar-thumb {
  background-color: #c4c4c4;
  border-radius: 16px;
}

.echart-card::-webkit-scrollbar-track {
  background-color: transparent;
}

.main {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.relitu {
  position: absolute;
  bottom: 1%;
  left: 1%;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0b275d;
}
::-webkit-scrollbar-thumb {
  width: 10px;
  background-color: #0b275d;
  border-radius: 10px;
}
.map-right {
  position: absolute;
  right: -65%;
  top: 8%;
  height: 135%;
  width: 550px;
  background-color: RGB(23, 80, 110, 0.6);
  border: 1px solid #0bb6c7;
  box-shadow:
    1px 2px 10px 1px rgba(14, 252, 255, 0.53),
    inset 5px 4px 100px 1px rgba(14, 252, 255, 0.34);

  .map-right-one {
    width: 100%;
    height: 300px;
    flex: 1;
  }
  .map-right-two {
    flex: 1;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;

    border-bottom: 1px solid #ccc;
  }

  // .map-right-two:nth-child(3) {
  //   width: 30%; /* 让第三个元素独占一行 */
  //   position: absolute;
  // }
  .map-right-three {
    flex: 1;
    width: 100%;
    height: 300px;
  }
}
</style>
